<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' leftIconColor="#ffffff" bgColor="transparent" @leftClick="navBack"  title="预约成功">
				<view slot="center" class="navTitle">
					预约成功
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30 pd30">
				<view class="appointComplete">
					<view class="tp">
						<view class="ico">
							<image src="@/static/images/icon-complete.svg" mode="aspectFit"></image>
						</view>
						<view class="tit">
							预约成功
						</view>
						<view class="time">
							心理辅导预约成功，需要按时到达心理咨询室哦!
						</view>
					</view>
					<view class="btns">
						<navigator :url="'/subpage/appointment/detail?id='+itemid" open-type="redirect" class="btn">
							查看预约详情
						</navigator>
						<view class="btn gray" @tap="backHome">
							返回首页
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow:function(){
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			if(page.options['id']){
				this.$data.itemid = page.options['id'];
			}
		},
		data() {
			return {
				itemid:'101'
			}
		},
		watch:{},
		methods: {},
		mounted(){}
	}
</script>

<style lang="scss" scoped>
	.appointComplete{
		padding: 40rpx;
		.tp{
			padding: 90rpx 0 30%;
			.ico{
				width: 90rpx;
				height: 90rpx;
				margin: 0 auto 30rpx;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.tit{
				text-align: center;
				font-size: 48rpx;
				font-weight: bold;
				line-height: 1;
				color: #65554d;
				margin-bottom: 20rpx;
			}
			.time{
				text-align: center;
				font-size: 28rpx;
				color: #65554d;
			}
		}
		.btns{
			.btn{
				text-align: center;
				line-height: 90rpx;
				height: 90rpx;
				outline: none !important;
				background: #fe9c29;
				color: #fff;
				border: none;
				border-radius: 90rpx;
				overflow: hidden;
				margin-bottom: 30rpx;
				font-size: 28rpx;
				&:before,&:after{
					display: none;
				}
				&.gray{
					background: #fff;
					color: #fe9c29;
				}
			}
		}
	}
</style>
